<template>
  <div>
    <Breadcrumbs :breadtitle="{ '1': '权限管理', '2': '权限列表' }"></Breadcrumbs>

    <el-card>

      <!-- 表格 -->
      <el-table :data="ShowRolesList[pagenum]" border style="width: 100%;marginTop:55px" stripe>
        <el-table-column align="center" type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="authName" label="权限名称"> </el-table-column>
        <el-table-column prop="path" label="路径"></el-table-column>
        <el-table-column prop="level" label="权限等级">
          <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.level==0">一级</el-tag>
            <el-tag size="small" type="success" v-else-if="scope.row.level==1">二级</el-tag>
            <el-tag size="small" type="warning" v-else-if="scope.row.level==2">三级</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination :current-page="pagenum" :page-size="7" :total="total" layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange">
      </el-pagination>

    </el-card>
  </div>
</template>

<script>
import Breadcrumbs from '@/components/Breadcrumbs'
export default {
  name: 'Rights',
  data() {
    return {
      RolesList: null,
      ShowRolesList: {},
      pagenum: 1, //当前的页数
      total: null
    }
  },
  components: {
    Breadcrumbs,
  },
  created() {
    this.getRights()
  },
  methods: {
    handleCurrentChange(newNum) {   //监听 页码值 改变事件
      this.pagenum = newNum
    },
    getRights() {
      this.$http.get('rights/list').then((res) => {
        if (res.data.meta.status !== 200) {
          return
        }
        this.RolesList = res.data.data
        this.total = res.data.data.length //总页数
        this.ShowRolesList = {}
        for (var i = 0; i < Math.ceil(this.total / 7); i++) { //处理成每个7个数据
          let num = 7 * (i + 1)
          if (num > this.total) num = this.total
          this.ShowRolesList[i + 1] = this.RolesList.slice(7 * (i), num)
        }
      })
    },
  },
}
</script>

<style>
</style>